<template>
    <view>
        <!--        <view class="items" v-if="countShow">
            <view>生成数量：</view>
            <view> <input type="text" placeholder="请输入生成数量(至少 1 个)" v-model="count"></view>
        </view> -->
        <!--        <view class="items">
            <view>编号前缀：</view>
            <view> <input type="text" placeholder="请输入编号前缀(用于区分商家)" v-model="number_first"></view>
        </view> -->
        <view class="itemScan">
            <view>设备SN：</view>
            <view> <input type="text" placeholder="设备编号(扫描设备上的二维码)" v-model="facility_number"></view>
            <view @click="scanCodeH5()">
                <!-- <image src="/static/scan.png" mode="scaleToFill" /> -->
            </view>
        </view>
        <view class="items">
            <view>设备编号：</view>
            <view> <input type="text" placeholder="请输入设备编号" v-model="facility_name"></view>
        </view>
        <view class="items">
            <view>设备名称：</view>
            <view> <input type="text" placeholder="请输入设备名称" v-model="number_first"></view>
        </view>
        <!-- <view class="itemSelect">
            <view class="item_1">所属车队：</view>
            <view class="item_2" @click="getCartList()"> {{ json.cartName == '' ? '请选择车队' : json.cartName }}</view>
        </view> -->
        <view class="item">
            <view class="item_1">工作模式：</view>
            <view class="item_2">
                <u-radio-group placement="row" size="30rpx" labelSize="20rpx" v-model="json.workingMode">
                    <u-radio activeColor="#007aff" label="单次" :name="1"></u-radio>
                    <view style="width: 30rpx;height: 10rpx;"></view>
                    <u-radio activeColor="#007aff" label="装货" :name="2"></u-radio>
                    <view style="width: 30rpx;height: 10rpx;"></view>
                    <u-radio activeColor="#007aff" label="卸货" :name="3"></u-radio>
                </u-radio-group>
            </view>
        </view>
        <view class="item">
            <view class="item_1">离线模式：</view>
            <view class="item_2">
                <u-radio-group placement="row" size="30rpx" labelSize="20rpx" v-model="json.offlineMode">
                    <u-radio activeColor="#007aff" label="是" :name="1"></u-radio>
                    <view style="width: 30rpx;height: 10rpx;"></view>
                    <u-radio activeColor="#007aff" label="否" :name="2"></u-radio>

                </u-radio-group>
            </view>
        </view>
        <view class="item">
            <view class="item_1">语音模式：</view>
            <view class="item_2">
                <u-radio-group placement="row" size="30rpx" labelSize="20rpx" v-model="json.audioType">
                    <u-radio activeColor="#007aff" label="开启" :name="1"></u-radio>
                    <view style="width: 30rpx;height: 10rpx;"></view>
                    <u-radio activeColor="#007aff" label="关闭" :name="2"></u-radio>

                </u-radio-group>
            </view>
        </view>
        <view class="item">
            <view class="item_1">打印模式：</view>
            <view class="item_2">
                <u-radio-group placement="row" size="30rpx" labelSize="20rpx" v-model="json.printType">
                    <u-radio activeColor="#007aff" label="关闭" :name="0"></u-radio>
                    <view style="width: 30rpx;height: 10rpx;"></view>
                    <u-radio activeColor="#007aff" label="一联" :name="1"></u-radio>
                    <view style="width: 30rpx;height: 10rpx;"></view>
                    <u-radio activeColor="#007aff" label="二联" :name="2"></u-radio>

                </u-radio-group>
            </view>
        </view>
        <view class="item">
            <view class="item_1">允许临时车：</view>
            <view class="item_2">
                <u-radio-group placement="row" size="30rpx" labelSize="20rpx" v-model="json.vehicleMode">
                    <u-radio activeColor="#007aff" label="开启" :name="1"></u-radio>
                    <view style="width: 30rpx;height: 10rpx;"></view>
                    <u-radio activeColor="#007aff" label="关闭" :name="2"></u-radio>

                </u-radio-group>
            </view>
        </view>
        <view class="item">
            <view class="item_1">输入卡号或车牌：</view>
            <view class="item_2">
                <u-radio-group placement="row" size="30rpx" labelSize="20rpx" v-model="json.vehicleWrite">
                    <u-radio activeColor="#007aff" label="开启" :name="1"></u-radio>
                    <view style="width: 30rpx;height: 10rpx;"></view>
                    <u-radio activeColor="#007aff" label="关闭" :name="2"></u-radio>

                </u-radio-group>
            </view>
        </view>
        <view class="itemSelect">
            <view class="item_1">线路名称：</view>
            <view class="item_2" @click="toSelectLine">
                <view v-if="json.lineArr.length == 0">请选择路线</view>
                <view v-else style="width: 100%;" class="line"> <text v-for="(item, index) in json.lineArr"
                        :key="index">{{
                            item.name }},</text></view>
            </view>
        </view>
        <view class="item">
            <view class="item_1">锁定卸车点：</view>
            <view class="item_2">
                <u-radio-group placement="row" size="30rpx" labelSize="20rpx" v-model="json.lock">
                    <u-radio activeColor="#007aff" label="开启" :name="1"></u-radio>
                    <view style="width: 30rpx;height: 10rpx;"></view>
                    <u-radio activeColor="#007aff" label="关闭" :name="2"></u-radio>

                </u-radio-group>
            </view>
        </view>
        <view class="itemSelect">
            <view class="item_1">装卸专员：</view>
            <view class="item_2" @click="toUnloadList">
                <view v-if="json.unloadList.length == 0" style="width: 100%;" class="line">请选择装卸专员</view>
                <view v-else style="width: 100%;" class="line"> <text v-for="(item, index) in json.unloadList"
                        :key="index">{{
                            item.name }},</text></view>
            </view>
        </view>
        <view class="itemSelect">
            <view class="item_1">货物名称：</view>
            <view class="item_2" @click="toSelectCargo">
                <view v-if="json.cargo.length == 0" style="width: 100%;" class="line">请选择货物</view>
                <view v-else style="width: 100%;" class="line"> <text v-for="(item, index) in json.cargo"
                        :key="index">{{
                            item.name }},</text></view>
            </view>
        </view>
        <u-collapse @change="change" @close="close" @open="open">
            <u-collapse-item title="体积" name="Docs guide">
                <view class="item">
                    <view class="item_1">手动输入：</view>
                    <view class="item_2">
                        <u-radio-group placement="row" size="30rpx" labelSize="20rpx" v-model="json.volumeWrite">
                            <u-radio activeColor="#007aff" label="开启" :name="1"></u-radio>
                            <view style="width: 30rpx;height: 10rpx;"></view>
                            <u-radio activeColor="#007aff" label="关闭" :name="2"></u-radio>

                        </u-radio-group>
                    </view>
                </view>
                <view class="itemSelect" style="border:none;">
                    <view class="item_1">体积：</view>
                    <view class="item_2" @click="toVolumeList">
                        <view v-if="json.volume.length == 0" style="width: 100%;" class="line">请选择体积</view>
                        <view v-else style="width: 100%;" class="line"> <text v-for="(item, index) in json.volume"
                                :key="index">{{
                                    item.name }},</text></view>
                    </view>
                </view>
            </u-collapse-item>
            <u-collapse-item title="重量" name="Docs guide">
                <view class="item">
                    <view class="item_1">手动输入：</view>
                    <view class="item_2">
                        <u-radio-group placement="row" size="30rpx" labelSize="20rpx">
                            <u-radio activeColor="#007aff" label="开启" :name="1"></u-radio>
                            <view style="width: 30rpx;height: 10rpx;"></view>
                            <u-radio activeColor="#007aff" label="关闭" :name="2"></u-radio>

                        </u-radio-group>
                    </view>
                </view>
                <view class="itemSelect" style="border:none;">
                    <view class="item_1">重量：</view>
                    <view class="item_2">请选择重量</view>
                </view>
            </u-collapse-item>
            <u-collapse-item title="距离" name="Docs guide">
                <view class="item">
                    <view class="item_1">手动输入：</view>
                    <view class="item_2">
                        <u-radio-group placement="row" size="30rpx" labelSize="20rpx" v-model="json.mileageWrite">
                            <u-radio activeColor="#007aff" label="开启" :name="1"></u-radio>
                            <view style="width: 30rpx;height: 10rpx;"></view>
                            <u-radio activeColor="#007aff" label="关闭" :name="2"></u-radio>

                        </u-radio-group>
                    </view>
                </view>
                <view class="itemSelect" style="border:none;">
                    <view class="item_1">距离：</view>
                    <view class="item_2" @click="toSelectMileage">
                        <view v-if="json.mileage.length == 0">请选择里程</view>
                        <view v-else style="width: 100%;" class="line"> <text v-for="(item, index) in json.mileage"
                                :key="index">{{
                                    item.name }},</text></view>
                    </view>
                </view>
            </u-collapse-item>
        </u-collapse>
        <!-- <view class="item">
            <view class="item_1">设备品牌：</view>
            <view class="item_2">
                <u-radio-group placement="row" size="30rpx" labelSize="20rpx" v-model="brand_name">
                    <u-radio activeColor="#007aff" label="商米" name="商米"></u-radio>
                    <view style="width: 30rpx;height: 10rpx;"></view>
                    <u-radio activeColor="#007aff" label="金泰宜" name="金泰宜"></u-radio>

                </u-radio-group>
            </view>
        </view> -->
        <view class="items">
            <view>打卡间隔：</view>
            <view> <input type="text" placeholder="请输入打卡间隔(分钟)" v-model="json.time"></view>
        </view>
        <view class="items">
            <view>备注信息：</view>
            <view> <input type="text" placeholder="请输入备注信息" v-model="json.content"></view>
        </view>
        <view class="submit" @click="submit">确认</view>
        <u-popup :show="cartShow">
            <view style="width: 100%;min-height: 500rpx;">
                <view class="cartItem" v-for="(item, index) in cartList" :key="index"
                    @click="cartTo(item.username, item.id)">{{ item.username }}</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import { facilityadd, userlist, vihiclelist } from "@/api/user.js"
let Qrcode = require('../../utils/reqrcode.js')
export default {
    components: {},
    props: {},
    data() {
        return {
            facility_number: '',
            facility_name: '',
            json: {
                cartName: '', //车队名称
                cartId: '',   //车队id
                workingMode: 1,// 工作模式
                offlineMode: 2,// 离线模式
                vehicleMode: 2, // 临时车
                audioType: 1, // 语音模式
                vehicleWrite: 2, // 是否允许输入车牌或卡号
                lineArr: [],  //  线路列表
                lock: 2,   //   锁定卸车点,
                cargo: [],  //   货物列表
                mileage: [],  //  运输里程
                mileageWrite: 2, //  运输里程是否允许手动输入
                unloadList: [], //  装卸人员列表
                volumeWrite: 2, //  体积是否允许输入
                volume: [],     //   体积列表
                printType: 1, //  打印类型
                time: '',
                content: '',
                brand_name: ''
            },
            cartShow: false,
            cartList: [],
            id: '',
            brand_name: '商米'
        };
    },
    watch: {},
    methods: {
        async confirmDate(e) {
            this.show = false;
            const timeFormat = uni.$u.timeFormat;
            let timeValue = await timeFormat(e.value, 'yyyy-mm-dd');
            this.shippingtime = timeValue;
        },
        closeDate() {
            this.show = false;
        },
        submit() {
            // this.json.brand_name = this.brand_name
            facilityadd({
                id: this.id,
                // brand_name: this.brand_name,
                facility_name: this.facility_name,
                content: this.json.content,
				facility_number:this.facility_number,
				number_first:this.number_first,
                all_set: encodeURIComponent(JSON.stringify(this.json))
            }).then(res => {
                console.log(res)
                if (res.code == 1) {
                    uni.showToast({
                        title: '成功～',
                        icon: 'none',
                        mask: true
                    })
                    setTimeout(() => {
                        uni.navigateBack({ delta: 1 })
                    }, 2000)
                }
            })
        },
        getUserList(id) {
            userlist({
                page: 1,
                pageSize: 1000,
                type: 4
            }).then(res => {
                console.log(res)
                for (let i = 0; i < res.data.length; i++) {
                    // const element = array[i];
                    if (res.data[i].id == id) {
                        this.owen_user = res.data[i].username
                    }

                }
                this.columns.push(res.data)
                console.log(this.columns)
            })
        },
        confirmType(e) {
            console.log(e)
            this.owen_user = e.value[0].username
            this.owen_user_id = e.value[0].id
            this.userShow = false;
        },
        closeType() {
            this.owen_user = '请选择商户'
            this.owen_user_id = ''
            this.userShow = false;
        },
        scanCodeH5() {
            uni.chooseImage({
                count: 1,
                success: imgRes => {
                    Qrcode.qrcode.decode(this.getObjectURL(imgRes.tempFiles[0]))
                    Qrcode.qrcode.callback = (codeRes) => {
                        if (codeRes.indexOf('error') >= 0) {
                            // 二维码识别失败

                        } else {
                            // 二维码识别成功
                            let r = this.decodeStr(codeRes)
                            this.facility_number = r
                        }
                    }
                }
            })
        },
        // 获取文件地址函数
        getObjectURL(file) {
            var url = null
            if (window.createObjectURL !== undefined) { // basic
                url = window.createObjectURL(file)
            } else if (window.URL !== undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file)
            } else if (window.webkitURL !== undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file)
            }
            return url
        },
        // 解码，输出：中文
        decodeStr(str) {
            var out, i, len, c;
            var char2, char3;
            out = "";
            len = str.length;
            i = 0;
            while (i < len) {
                c = str.charCodeAt(i++);
                switch (c >> 4) {
                    case 0:
                    case 1:
                    case 2:
                    case 3:
                    case 4:
                    case 5:
                    case 6:
                    case 7:
                        // 0xxxxxxx
                        out += str.charAt(i - 1);
                        break;
                    case 12:
                    case 13:
                        // 110x xxxx 10xx xxxx
                        char2 = str.charCodeAt(i++);
                        out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
                        break;
                    case 14:
                        // 1110 xxxx 10xx xxxx 10xx xxxx
                        char2 = str.charCodeAt(i++);
                        char3 = str.charCodeAt(i++);
                        out += String.fromCharCode(((c & 0x0F) << 12) |
                            ((char2 & 0x3F) << 6) |
                            ((char3 & 0x3F) << 0));
                        break;
                }
            }
            return out;
        },
        open(e) {
            // console.log('open', e)
        },
        close(e) {
            // console.log('close', e)
        },
        change(e) {
            // console.log('change', e)
        },
        getCartList() {
            userlist({
                page: 1,
                pageSize: 1000,
                type: 3
            }).then(res => {
                console.log(res)
                this.cartShow = true;
                this.cartList = res.data
            })
        },
        cartTo(name, id) {
            this.json.cartName = name;
            this.json.cartId = id;
            this.cartShow = false;
        },
        toSelectLine() {
            let _this = this;
            uni.navigateTo({
                url: '/pages/manufacturer/disposition?type=2&model=select',
                events: {
                    someEvent: function (data) {
                        console.log(data.data)
                        _this.json.lineArr = data.data;
                    }
                },
                success: function (res) {

                }
            })
        },
        toSelectCargo() {
            let _this = this;
            uni.navigateTo({
                url: '/pages/manufacturer/disposition?type=1&model=select',
                events: {
                    someEvent: function (data) {
                        console.log(data.data)
                        _this.json.cargo = data.data;
                    }
                },
                success: function (res) {

                }
            })
        },
        toSelectMileage() {
            let _this = this;
            uni.navigateTo({
                url: '/pages/manufacturer/disposition?type=4&model=select',
                events: {
                    someEvent: function (data) {
                        console.log(data.data)
                        _this.json.mileage = data.data;
                    }
                },
                success: function (res) {

                }
            })
        },
        toUnloadList() {
            let _this = this;
            uni.navigateTo({
                url: '/pages/manufacturer/unloadList?&select=select',
                events: {
                    someEvent: function (data) {
                        console.log(data.data)
                        _this.json.unloadList = data.data;
                    }
                },
                success: function (res) {

                }
            })
        },
        toVolumeList() {
            let _this = this;
            uni.navigateTo({
                url: '/pages/manufacturer/disposition?type=3&model=select',
                events: {
                    someEvent: function (data) {
                        console.log(data.data)
                        _this.json.volume = data.data;
                    }
                },
                success: function (res) {

                }
            })
        }
    },
    onShow() { },
    onLoad(option) {

        if (option.type == 'add') {
            uni.setNavigationBarTitle({
                title: '添加设备'
            });
        } else {
            let _this = this;
            const eventChannel = _this.getOpenerEventChannel();
            eventChannel.on('acceptDataFromOpenerPage', function (data) {
                console.log(data)
                _this.facility_name = data.data.facility_name
                _this.facility_number = data.data.facility_number
                let info = decodeURIComponent(data.data.all_set)
                let json = info.replaceAll("&quot;", "\"")
                // console.log(json)
                _this.json = JSON.parse(json)
                // console.log(_this.json)
                _this.id = data.data.id
            })
            // let info = decodeURIComponent(option.info)
            // const item = ;
            // console.log(JSON.parse(info))
            return false;
            console.log(item)

        }
    },
};
</script>
<style scoped lang='scss'>
.item {
    display: flex;
    width: 94%;
    height: 110rpx;
    margin: auto;
    line-height: 110rpx;
    border-bottom: 1px solid #efefef;

    .item_1 {
        width: 40%;
    }

    .item_2 {
        width: 50%;
        margin-top: 50rpx;

        text-align: right;
    }
}

.itemScan {
    display: flex;
    width: 94%;
    height: 110rpx;
    margin: auto;
    line-height: 110rpx;
    border-bottom: 1px solid #efefef;

    view:nth-child(1) {
        width: 40%;
    }

    view:nth-child(2) {
        width: 60%;
        // text-align: right;

        input {
            width: 100%;
            height: 100%;
        }
    }

    view:nth-child(3) {
        width: 60rpx;
        height: 60rpx;

        image {
            width: 100%;
            height: 100%;
        }

        margin-top: 25rpx;
    }
}

.itemSelect {
    display: flex;
    width: 94%;
    height: 110rpx;
    margin: auto;
    line-height: 110rpx;
    border-bottom: 1px solid #efefef;

    view:nth-child(1) {
        width: 40%;
    }

    view:nth-child(2) {
        width: 60%;
        // text-align: right;

        input {
            width: 100%;
            height: 100%;
        }
    }
}

.items {
    display: flex;
    width: 94%;
    height: 110rpx;
    margin: auto;
    line-height: 110rpx;
    border-bottom: 1px solid #efefef;

    view:nth-child(1) {
        width: 40%;
    }

    view:nth-child(2) {
        width: 60%;
        // text-align: right;

        input {
            width: 100%;
            height: 100%;
        }
    }
}

.item_date {
    display: flex;
    width: 94%;
    height: 110rpx;
    margin: auto;
    line-height: 110rpx;
    border-bottom: 1px solid #efefef;

    view:nth-child(1) {
        width: 30%;
    }

    view:nth-child(2) {
        width: 70%;
        color: $uni-color-primary;
        // text-align: right;
    }
}

.submit {
    width: 94%;
    height: 90rpx;
    background-color: $uni-color-primary;
    border-radius: 50rpx;
    margin: auto;
    margin-top: 130rpx;
    text-align: center;
    line-height: 90rpx;
    color: #fff;
}

.cartItem {
    width: 100%;
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    border-bottom: 1px solid #efefef;
}

.line {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}
</style>